<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="first">首页->项目监督</div>
            <div class="line"></div>
            <div class="top">
                <Select v-model="departmentName" style="width:210px" filterable clearable>
                    <Option v-for="(item,index) in Community" :value="item.department" :key="index">{{ item.department
                        }}
                    </Option>
                </Select>
                <Input v-model="projectName" class="top-header" placeholder="请输入项目名称" style="width: 308px"/>
                <Button class="top-select" @click="search">查询</Button>
            </div>
            <div class="table">
                <Table border :columns="columns1" :data="data1" class="columns">
                    <template slot="action" slot-scope="{ row }">
                        <Button size="small" class="actionBtn" @click="look(row)">查看/举报</Button>
                    </template>
                </Table>
            </div>
            <modal v-model="listModel" width="80%" footer-hide>
                <project-info :option="rowdata"></project-info>
                <project-complaint ref="report" :list="selectList" :projectId="projectId"
                                   @results="submitAction"></project-complaint>
            </modal>
            <div class="page">
                <Page :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      show-total @on-change="pageChange"/>
            </div>
        </div>
    </div>
</template>

<script>

import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import ProjectInfo from './components/project-info/index'
import ProjectComplaint from './components/project-complaint/index'
import { getProjectSupervisionList, getSupervisionNameList } from '@/api/site'
import { addProjectReport } from '@/api/manager-report'

export default {
  components: { ProjectComplaint, ProjectInfo, SiteHeader, SiteMenus },
  data () {
    return {
      tableLoading: false,
      rowdata: {},
      listModel: false,
      selectList: [
        {
          content: '转包和违法分包'
        },
        {
          content: '违规承揽工程'
        },
        {
          content: '建筑用料不符合标准'
        },
        {
          content: '施工手续不全'
        },
        {
          content: '公示数据不实'
        },
        {
          content: '围标串标'
        },
        {
          content: '未批先建'
        },
        {
          content: '其他问题'
        }
      ],
      Community: [],
      columns1: [
        {
          title: '资金项目名称',
          align: 'center',
          key: 'project_name',
          width: 300
        },
        {
          title: '主管部门',
          align: 'center',
          key: 'department',
          width: 170
        },
        {
          title: '建设内容',
          align: 'center',
          key: 'content',
          width: 309
        },
        {
          title: '建设地址',
          align: 'center',
          key: 'address',
          width: 308
        },
        {
          title: '拨付金额（万元）',
          align: 'center',
          key: 'money',
          width: 180
        },
        {
          title: '查看/举报',
          align: 'center',
          slot: 'action',
          width: 140
        }
      ],
      data1: [],
      model1: '项目主管列表',
      value: '',
      projectName: '',
      departmentName: '',
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 1
      },
      projectId: ''
    }
  },
  methods: {
    getList (data) {
      this.tableLoading = true
      getProjectSupervisionList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.data1 = data.data.list.data
          this.pageObj.totalRecord = data.data.list.total
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.$Modal.error({
            title: '获取数据失败！'
          })
        }
      })
    },
    getNameList () {
      getSupervisionNameList().then(ret => {
        this.Community = ret.data.data.list
      })
    },
    look (row) {
      this.listModel = true
      this.rowdata = row
      this.projectId = row.id
    },
    search () {
      this.pageObj.page = 1
      this.pageObj.pageSize = 10
      const data = {
        ...this.pageObj,
        project_name: this.projectName,
        department: this.departmentName
      }
      this.getList(data)
    },
    submitAction (formItem) {
      addProjectReport(formItem).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$Message.success('举报成功')
        } else {
          this.$Message.error('举报失败')
        }
        this.listModel = false
        this.$refs.report.handleReset()
      })
    },
    pageChange (e) {
      this.pageObj.page = e
      const data = {
        ...this.pageObj,
        project_name: this.projectName,
        department: this.departmentName
      }
      this.getList(data)
    }
  },
  mounted () {
    this.$refs.menus.changeColor = this.$route.query.index
    this.getList(this.pageObj)
    this.getNameList()
  }
}
</script>

<style scoped lang="less">
    .home-page {
        height: 100%;
        overflow: scroll;
    }

    .content {
        height: 1000px;
        width: 94%;
        margin-left: 3%;
    }

    .first {
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }

    .line {
        height: 5px;
        background-color: #0166b6;
    }

    .top {
        margin-top: 30px;

        &-header {
            margin-left: 20px;
        }

        &-select {
            margin-left: 20px;
            width: 150px;
            background-color: #0166b6;
            color: white;
        }
    }

    .actionBtn {
        background-color: #2E87CB;
        color: white;
    }

    .table {
        margin-top: 20px;
    }

    .columns /deep/ tr {
        height: 55px;
    }

    .page {
        text-align: center;
        margin-top: 20px;
    }
</style>
